<template>
  <view class="insure-detail-page">
    <uni-page-header title="投保详情" />
    <view class="main-container">
      <view class="content">
        <image :src="banner" lazy-load class="banner"  v-if="banner"/>
        <view v-if="content" class="content-value" :style="{color: contentColor || '#000'}" v-html="content" />
      </view>
    </view>
    <view class="submit-btn">
      <u-button color="#78ffe6" text="投保" style="width: 50%;" @click="onToInsure" />
    </view>
    
    <u-popup :show="popupShow" mode="center" :round="10" :safe-area-inset-bottom="false" @close="popupShow = false">
      <view class="popup-content">
        <view class="title">青丝几何 发量小官</view>
        <u-image :src="barcodeImg" width="200" height="200" lazy-load />
        <view class="desc">长安二维码添加你的发量守护官</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getImg,
  getCurrentPageConfigByName
} from '../../utils/index'
import barcodeTestImg from '@/static/images/barcode-test.png'
export default {
  name: 'InsureDetail',
  data() {
    return {
      popupShow: false,
      banner: '',
      content: '',
      contentColor: '',
      barcodeImg: barcodeTestImg
    }
  },
  onLoad() {
    this.initPage()
  },
  methods: {
    initPage() {
      const _this = this
      getCurrentPageConfigByName('投保详情').then(res => {
        console.log('投保详情---模块配置数据')
        console.log(res)
        const { bg_image, rich_text, color } = res
        _this.banner = getImg(bg_image)
        _this.content = rich_text
        _this.contentColor = color
      })
    },
    onToInsure() {
      this.popupShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.insure-detail-page{
  .main-container{
    width: 95%;
    min-height: 300rpx;
    padding: 26rpx;
    margin: 20rpx auto 100rpx auto;
    border-radius: 15rpx;
    background-color: #FFF;
    .content{
      font-size: 28rpx;
      .banner{
        width: 100%;
        height: 326rpx;
        border-radius: 10rpx;
      }
      .value{
        margin-top: 20rpx;
      }
    }
  }
  .submit-btn{
    width: 100%;
    height: 200rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    @include flex-center;
    background-color: #F5F5F5;
    ::v-deep.u-button{
      width: 80%;
      &__text{
        color: #333;
        font-size: 32rpx !important;
      }
    }
  }
  .popup-content{
    width: 80vw;
    height: 720rpx;
    padding: 0 20rpx;
    @include flex-center;
    flex-flow: column;
    .title{
      font-size: 32rpx;
      padding-bottom: 60rpx;
    }
    .desc{
      font-size: 32rpx;
      padding-top: 26rpx;
    }
  }
}
</style>
